<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>javascript 阶段</title>
    <style>
        .list {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        .list li {
            height: 40px;
            background-color: #f0f0f0;
            margin-bottom: 10px;
        }
        .list li div {
            height: 40px;
            text-align: right;
            line-height: 40px;
            color: #fff;
        }
        .list li:nth-child(1) div {
            background-color: red;
        }
        .list li:nth-child(2) div {
            background-color: yellowgreen;
        }
        .list li:nth-child(3) div {
            background-color: deepskyblue;
        }
        .list li:nth-child(4) div {
            background-color: orange;
        }
    </style>
</head>
<body>


    <!--
            <ul class="list">
                <li><div style="width: 500px;">50 国家1</div></li>
                <li><div style="width: 400px;">40 国家2</div></li>
                <li><div style="width: 300px;">30 国家3</div></li>
                <li><div style="width: 250px;">25 国家4</div></li>
            </ul>  
    -->




    <script>

        //如果摘得1枚奖牌  用10px来表示!

        // 定义函数, 产生不同国家的数据 (创建闭包)
        function createData(lenth) {// 作用域1
            // 获得奖牌的数量
            var len = lenth ;
            // 返回函数
            return function(){ // 作用域2

                len += 1; // 获取了1枚奖牌

                return len;// 返回奖牌的数量
            }
        }

        // 国家1
        var guojia_first =  createData(50);
       

        // 国家2
        var guojia_second =  createData(40);
       

        // 国家3
        var guojia_third =  createData(30);
        

        // 国家4
        var guojia_fourth =  createData(25);
       

        // 要求:
            // 当前所有国家获得的奖牌数量如下:
            // 国家1,再次获取6枚奖牌
            // 国家2,再次获取2枚奖牌
            // 国家3,再次获取7枚奖牌
            // 国家4,再次获取3枚奖牌

        // 每个国家获取奖牌的数量
            // 国家1  56枚
            var v1 = guojia_first();
                v1 = guojia_first();
                v1 = guojia_first();
                v1 = guojia_first();
                v1 = guojia_first();
                v1 = guojia_first();
                console.log(v1);

            // 国家2  42枚
            var v2 = guojia_second();
                v2 = guojia_second();
                console.log(v2);

            // 国家3  37枚
            var v3 = guojia_third();
                v3 = guojia_third();
                v3 = guojia_third();
                v3 = guojia_third();
                v3 = guojia_third();
                v3 = guojia_third();
                v3 = guojia_third();
                console.log(v3);

            // 国家3  28枚
            var v4 = guojia_fourth();
                v4 = guojia_fourth();
                v4 = guojia_fourth();
                console.log(v4);

        // 按照上述要求,展示每个国家当前奖牌的数据

        function template(v1,v2,v3,v4){
            // 字符串拼接
            var str =  ''
                str += '<ul class="list">'
                str += '    <li><div style="width:'+(v1 * 10)+'px;">'+v1+' 国家1</div></li>'
                str += '    <li><div style="width:'+(v2 * 10)+'px;">'+v2+' 国家2</div></li>'
                str += '    <li><div style="width:'+(v3 * 10)+'px;">'+v3+' 国家3</div></li>'
                str += '    <li><div style="width:'+(v4 * 10)+'px;">'+v4+' 国家4</div></li>'
                str += '</ul> '

            // 渲染数据
            document.write(str);
        }

        // 数据展示在页面之上
        template(v1,v2,v3,v4)








    </script>
</body>
</html>